<#include "/layout/layout.ftl"/>

<@body>
<link href="/css/toolPage.css" rel="stylesheet"/>
<link href="/lib/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="/lib/bootstrap-select/js/bootstrap-select.min.js"></script>
<link href="/lib/jsoneditor/css/jsoneditor.min.css" rel="stylesheet" />
<script src="/lib/jsoneditor/js/jsoneditor.min.js"></script>
<script src="/script/tool/dubbo.js"></script>
<script src="/script/tool/jsonEditorUtil.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-1">
                <label>zookeeper地址:</label>
            </div>
            <div class="col-md-9">
                <input id="zkAddress" type="text" class="form-control" value="${zkAddress!}">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-1">
                <label>接口名称:</label>
            </div>
            <div class="col-md-9">
                <input id="interfaceName" type="text" class="form-control">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-1">
                <label>ip端口:</label>
            </div>
            <div class="col-md-2">
                <select id="ip" class="selectpicker show-tick form-control" data-live-search="true" >

                </select>
            </div>
            <div class="col-md-1">
                <label>方法名:</label>
            </div>
            <div class="col-md-6">
                <select id="interfaceMethod" class="selectpicker show-tick form-control" onchange="methodParam()">

                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-1">
                <label>编码:</label>
            </div>
            <div class="col-md-2">
                <select id="encoding" class="form-control" >
                    <option value="UTF-8">UTF-8</option>
                    <option value="GBk">GBK</option>
                </select>
            </div>
            <div class="col-md-1">
                <label>超时(秒):</label>
            </div>
            <div class="col-md-2">
                <select id="timeout" class="form-control">
                    <option value="1000">1</option>
                    <option value="2000">2</option>
                    <option value="3000">3</option>
                    <option value="4000">4</option>
                    <option value="5000">5</option>
                    <option value="6000">6</option>
                    <option value="7000">7</option>
                    <option value="8000">8</option>
                    <option value="9000">9</option>
                    <option value="10000">10</option>
                </select>
            </div>
            <input type="button" onclick="resolveIp()" value="解析ip" class="btn btn-primary">
            <input type="button" onclick="resolveMethod()" value="解析方法" class="btn btn-primary">
            <input type="button" onclick="invoke()" value="调用接口" class="btn btn-primary">
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="col-md-6">
                <h4>入参:
                    <span style="color: red">方法参数解释:0代表是第一个参数，1代表第二个参数，以此类推</span>
                </h4>
            </div>
            <div class="col-md-6">
                <h4>结果:</h4>
            </div>
        </div>
    </div>
    <div class="row" style="height: 64%">
        <div class="col-md-12">
            <div class="col-md-6">
                <div id="param">
                </div>
            </div>
            <div class="col-md-6">
                <div id="result">

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var paramJsonEditor;
    var resultJsonEditor;
    $(function () {
        $(".selectpicker").selectpicker();
        paramJsonEditor =initJsonEditor("param","tree");
        resultJsonEditor =initJsonEditor("result","tree");
        var array=[];
        paramJsonEditor.set(array);
    })
</script>
</@body>